<template>
  <view class="bigbox">
    <u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="true" radius="5"
      bgColor="#ffffff"></u-swiper>

    <!--  -->
    <view class="">
      <view class="onebox" style="width: 100%;height: 80rpx;">
        <u-tabs :activeStyle="{
              color: '#303133',
              fontWeight: 'bold',
              transform: 'scale(1.05)'
          }" :list="list1" @change="clicktabs"></u-tabs>
      </view>
      <view class="istext" v-if="current==0">

        <scroll-view scroll-y="true" class="scrollview">
          <view class="dtbox" v-for="item in 10">
            <view class="upbox">
              <view class="left">
                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
              </view>
              <view class="right">
                <img width="110rpx" height="110rpx" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">
              </view>
            </view>
            <view class="heng">

            </view>
            <view class="downbox">
              <view class="one">
                2023-09-18
              </view>
              <view class="">

              </view>
            </view>

          </view>

        </scroll-view>

      </view>
      <view class="istext" v-if="current==1">
       <scroll-view scroll-y="true" class="scrollview">
         <view class="dtbox" v-for="item in 10">
           <view class="upbox">
             <view class="left">
               XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
             </view>
             <view class="right">
               <img width="110rpx" height="110rpx" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" alt="">
             </view>
           </view>
           <view class="heng">
       
           </view>
           <view class="downbox">
             <view class="one">
               2023-09-18
             </view>
             <view class="">
       
             </view>
           </view>
       
         </view>
       
       </scroll-view>
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        current: 0,
        list1: [{
            name: '新闻动态',
            index: '0',
          },
          {
            name: '协会公告',
            index: '1',
          },

        ],
        list3: [
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        ],
      }
    },
    onLoad() {

    },
    methods: {
      clicktabs(item) {

        this.current = item.index

      },
    }
  }
</script>

<style lang="scss" scoped>
  .bigbox {
    width: 100%;
    height: 88vh;
    background: #F5F5F5;

    .dtbox {
      width: 700rpx;
      height: 300rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 30rpx;

      .upbox {
        height: 250rpx;
        display: flex;
        justify-content: space-evenly;

        .left {
          width: 200rpx;
          height: 300rpx;
          word-wrap: break-word;
          margin-top: 20rpx;
        }

        .right {

          margin-top: 20rpx;
        }
      }

      .heng {
        height: 2rpx;
        width: 650rpx;
        background-color: black;
        margin-left: 20rpx;
      }

      .downbox {
        display: flex;
        justify-content: space-between;

        .one {
          font-size: 18rpx;
          margin-top: 5rpx;
          margin-left: 20rpx;
        }
      }
    }

    .scrollview {
      height: 65vh;
    }
  }

  .onebox {
    display: flex;
    justify-content: space-evenly;
    // justify-content: space-between;
  }

  /deep/ .u-tabs__wrapper__nav__item {
    padding: 0 50px;
  }

  .istext {
    width: 100%;
    margin-left: 24rpx;
    margin-top: 30rpx;

  }
</style>